<template>
  <div class="login-container">
    <img :src="this.$store.state.themeBg" class="imgBack" />

    <div class="language">
      <el-dropdown trigger="click" size="mini" @command="handleSetLanguage">
        <span class="el-dropdown-link">
          <span style="padding: 5px; color: white">EN {{$t("login.lanuage")}}</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cn" :disabled="language === 'cn'"
            ><i class="el-icon-location-outline"></i> 中文</el-dropdown-item
          >
          <el-dropdown-item command="en" :disabled="language === 'en'"
            ><i class="el-icon-location-outline"></i> English</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="theme">
      <el-dropdown trigger="click" size="mini" @command="handleSetTheme">
        <span class="el-dropdown-link">
          <span style="padding: 5px; color: white">{{
            $t("login.style")
          }}</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="theme[0]" :disabled="styles === 'dark'"
            ><i class="el-icon-location-outline"></i>
            {{ $t("login.stylebtn1") }}</el-dropdown-item
          >
          <el-dropdown-item :command="theme[1]" :disabled="styles === 'light'"
            ><i class="el-icon-location-outline"></i>
            {{ $t("login.stylebtn2") }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="el-login-main">
      <el-col>
        <el-form
          style="text-align:center"
          ref="form"
          :model="form"
          :rules="rules"
          label-position="center"
        >
          <div :class="this.$store.state.theme=='dark'?'login_texts':'login_text'">
            <h1 :class="this.$store.state.theme=='dark'?'logotitlers':'logotitles'">Welcome!</h1>
            <h3 :class="this.$store.state.theme=='dark'?'logotitler':'logotitle'">可视化智能融合系统</h3>
          </div>
          <div style="display: inline-block;vertical-align: top; justify-content: center;    width: 452px;
    height: 525px;">
            <el-card
            :class="this.$store.state.theme=='dark'?'login_form':'login_forms'"
             style="    width: 452px;
    height: 525px;    border-radius: 0px;" 
            >
              <!-- <div class="title" style="display:none">{{ $t("login.login") }}</div> -->
              <el-form-item prop="account" style="margin-top: 20%;">
                <el-input
                :class="this.$store.state.theme=='dark'?'inputplace':'inputplaces'"
                  prefix-icon="iconfont el-icon-user"
                  v-model.trim="form.account"
                  v-focus
                  :placeholder="$t('login.uname')"
                  type="text"
                  tabindex="1"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                :class="this.$store.state.theme=='dark'?'inputplace':'inputplaces'"
                  prefix-icon="iconfont el-icon-lock"
                  type="password"
                  v-model.trim="form.password"
                  :placeholder="$t('login.upassword')"
                  @keydown.enter.native="handleLogin"
                  tabindex="2"
                  autocomplete="off"
                  show-password
                ></el-input>
              </el-form-item>

              <el-form-item prop="status" style="margin-bottom: 30px;">
                <JcRange status="status" :successFun="update"></JcRange>
              </el-form-item>
               <div style="text-align: left;margin-bottom: 30px;display:none;">
               <el-checkbox v-model="checked" style="color: white">{{
                $t("login.rememberPassword")
              }}</el-checkbox>
              </div>
              <el-form-item style="margin-bottom: 0px;">
			  <template slot-scope="scope">
                  <el-button
                    @click="handleLogin(scope.row)"
                    round
                  >
                    {{ $t("login.loginbtn") }}</el-button
                  >
                </template>
              </el-form-item>
            </el-card>
          </div>
        </el-form>
      </el-col>
    </div>

    <div class="el-login-footer">
      <p>
        {{ $t("login.foottxt1") }}
      </p>
      <p>{{ $t("login.foottxt2") }}</p>
    </div>
  </div>
</template>
<script>
import { isPassword } from "@/common/validate"; //表单验证
import { mapMutations } from "vuex";
import JcRange from "@/components/public/JcRange.vue"; //滑块组件
export default {
  name: "Login",
  directives: {
    //定义指令函数
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    const validateusername = (rule, value, callback) => {
      if ("" == value) {
        callback(new Error(this.$t("login.validatename")));
      } else {
        callback();
      }
    };

    const validatepassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error(this.$t("login.validatepassword")));
      } else {
        callback();
      }
    };

    const checkStatus = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(this.$t("login.validatesliding")));
      } else {
        callback();
      }
    };

    return {
      checked: false, //记住密码值
      theme: [
        {
          theme: "dark",
          themeBg: require("../assets/login-bc.png"),
          themeHref: "../static/css/global.css",
        },
        {
          theme: "light",
          themeBg: require("../assets/login-bc2.png"),
          themeHref: "../static/css/theme.css",
        },
      ],
      form: {
        account: "",
        password: "",
        status: false, //滑块验证值
      },
      rules: {
        account: [
          {
            required: true,
            trigger: "blur",
            validator: validateusername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatepassword,
          },
        ],
        status: [
          {
            required: true,
            trigger: "change",
            validator: checkStatus,
          },
        ],
      },
      redirect: undefined,
    };
  },
  components: {
    JcRange, //滑块验证
  },
  computed: {
    language() {
      return this.$store.state.language;
    },
    styles() {
      return this.$store.state.theme;
    },
  },
  created() {
    document.body.style.overflow = "hidden";
  },
  mounted() {
    //this.getCookie();
  },
  beforeDestroy() {
    document.body.style.overflow = "auto";
  },
  methods: {
    ...mapMutations(["getTokens", "userInfo"]),
    async sendLogin() {
      try {
        let params = {
          Account: this.form.account, //用户名
          Password: this.form.password, //密码
        };
        let res = await this.$api.login.sendToken(params);
        let userinfo = JSON.stringify(res.data);
        if (res.code == 200) {
          this.$notify({
            title: "Success",
            duration: 5000,
            message: this.$t("login.success"),
            type: "success",
          });
          this.userInfo(userinfo);
          let token = {
            client_id: "IFSCommon", //服务名
            client_secret: "IFSCommon", //服务名
            username: res.data.account, //用户名
            password: res.data.pwd, //密码
            grant_type: "password", //密码形式查询
          };
          let tokenList = await this.$api.login.getToken(token);
          this.userToken =
            "Bearer " + JSON.parse(JSON.stringify(tokenList)).access_token;
          this.getTokens({ Authorization: this.userToken });
          this.$router.push({ path: "/hq" });
        } else {
          this.$notify({
            title: "Error",
            duration: 2000,
            message: res.msg,
            type: "error",
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    update() {
      this.form.status = true;
    },
    handleSetLanguage(lang) {
      // 选择语言
      this.$i18n.locale = lang;
      sessionStorage.setItem("language", JSON.stringify(lang));
      // 保存vuex
      this.$store.commit("setLanguage", lang);
      if (lang == "cn") {
        this.$message({
          message: "语言切换成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "Language switch successful",
          type: "success",
        });
      }
    },
    //主题切换
    handleSetTheme(theme) {
      // this.$i18n.locale = theme;
      sessionStorage.setItem("theme", JSON.stringify(theme));
      // 保存vuex
      this.$store.commit("theme", theme);
      if (theme.theme == "dark") {
        this.$message({
          message: this.$t("login.styletheme1"),
          type: "success",
        });
      } else {
        this.$message({
          message: this.$t("login.styletheme2"),
          type: "success",
        });
      }
    },
    //登录
    handleLogin(formName) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //登录成功跳转地址
          this.sendLogin();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.login-container {
  height: 100vh;
  background-size: cover;

  .imgBack {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    min-width: 800px;
    min-height: 700px;
    margin: 0 auto;
    top: 0px;
    left: 0px;
  }

  .language {
    margin-left: 80%;
    margin-top: 1%;
    cursor: pointer;
    display: inline-block;
    min-width: 120px;
    height: 35px;
    border-radius: 25px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #ffffff;
    margin-right: 20px;
    padding: 0 10px;
  }

  .theme {
    margin-top: 1%;
    cursor: pointer;
    display: inline-block;
    width: 120px;
    height: 35px;
    border-radius: 25px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #ffffff;
  }
  //深色系
  .login_texts{
    // color: #00e1eb;
    text-align: center;
    // margin-top: 5%;
    font-family: Microsoft YaHei;
    display: inline-block;
    vertical-align: top;
    width: 452px;
    height: 525px;
    background-color: #032553;
    opacity: 0.8;
    position: relative;
    margin-right: -5px;
    color: #ffffff;
    .logotitler{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -156px;
      color: #fffcfc;
      margin-top: 14px;
      font-size: 31px;
      letter-spacing: 2px;
    }
    .logotitlers{
      letter-spacing: 2px;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -160px;
      color: #fffcfc;
      margin-top: -64px;
    }
  }
  //浅色系
  .login_text {
    // color: #00e1eb;
    text-align: center;
    // margin-top: 5%;
    font-family: Microsoft YaHei;
    display: inline-block;
    vertical-align: top;
    width: 452px;
    height: 525px;
    background-color: #77d0f2;
    opacity: 0.8;
    position: relative;margin-right: -5px;
    .logotitles{
      letter-spacing: 2px;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -160px;
      color: #fffcfc;
      margin-top: -64px;
    }
    .logotitle{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -156px;
      color: #fffcfc;
      margin-top: 14px;
      font-size: 31px;
      letter-spacing: 2px;
    }
  }
  .el-form-item{
    margin-bottom: 50px;
  }
  .iconfont {
    color: #9a9a9a;
    font-size: 22px;
  }
  .login_form {
    input.el-input__inner{
      opacity: 0.5;
      background: #0d547b;
      height: 45px;
      border: 0px;
      border-bottom-style: solid;
      border-bottom-width: 1px;
    }
  }
  .login_forms input.el-input__inner {
    opacity: 0.5;
    background: #ffffff;
    color: #000;
    height: 45px;
    border: 0px;
    border-radius: 0px;
    border-bottom: 2px solid #e8e8e8;
  }
  .el-button{
    width: 100%;
    opacity: 0.8;
    height: 50px;
    font-size: 20px;
    letter-spacing: 4px;
    background: #3E86FB;
    color: #FFFFFF;
  }
  input {
    color: white;
    font-size: 18px;
  }
  .inputplace > input::-webkit-input-placeholder {
    color: #ffffff;
  }
  .inputplaces > input::-webkit-input-placeholder {
    color: #9F9D9E;
  }
  .login_forms {
    width: 450px;
    border: none;
    background-size: contain;
    background-color: #ffffff;
    .title {
      padding: 0 10px 20px 10px;
      letter-spacing: 3px;
      font-size: 24px;
      font-weight: 400;
      color: #0060c8;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-input {
      width: 100%;
      margin-right: 0;
    }
  }

  .login_form {
    width: 450px;
    border: none;
    // background: url("~@/assets/login-border.png") no-repeat;
    background-size: contain;
    background-color: #032553;
    .title {
      padding: 0 10px 20px 10px;
      letter-spacing: 3px;
      font-size: 24px;
      font-weight: 400;
      color: #00e1eb;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-input {
      width: 100%;
      margin-right: 0;
    }
  }

  .el-login-main {
    position: fixed;
    bottom: 20%;
    width: 100%;
    font-family: Arial;
    font-size: 14px;
    letter-spacing: 1px;
  }
  .el-login-footer {
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 14px;
    letter-spacing: 1px;
  }
  .el-dropdown-menu__item{
    color: #FFFFFF;
  }
}
.el-dropdown-menu{
  background-color: #ffffff!important;
}
.el-dropdown-menu__item{
  color: #000;
}
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #2179cc!important;
  color: #ffffff;
}
.el-message--error{
    background-color: #10203c!important;
    border-color: #10203c!important;
}
.el-message--success{
    background-color: #10203c!important;
    border-color: #10203c!important;
}
.el-message--warning{
    background-color: #10203c!important;
    border-color: #10203c!important;
}
</style>
<style>
.el-popper[x-placement^=bottom] .popper__arrow:after{
  border-bottom-color: #ffffff!important;
}
.inputplace > input{
  background-color: #032553!important;
  color: #ffffff!important;
  border: 0px;
  border-bottom: 2px solid #f4f4f4;
  border-radius: 0px;
  font-size: 15px;
}
.inputplaces > input{
  background-color: #ffffff!important;
  color: #9A9A9A!important;
  border: 0px;
  border-bottom: 2px solid #f4f4f4;
  border-radius: 0px;
  font-size: 15px;
}
.inputplace > .el-input__prefix{
  color: #ffffff!important;
}
.inputplaces > .el-input__prefix{
  color: #9A9A9A!important;
}
.inputplaces > .el-input__prefix > .el-input__icon{
  font-size: 20px;
}
.inputplace > .el-input__prefix > .el-input__icon{
  font-size: 20px;
}
</style>
<style>
:root{
  --message-error-back:#19303c;/*错误提示框的背景颜色*/
  --message-success-back:#19303c;/*正确提示框的背景颜色*/
  --message-warning-back:#19303c;/*警告提示框的背景颜色*/
}
</style>